<template>
	<view class="bg-white page">
		<cu-custom bgColor="bg-orange-main" :isBack="false">
		    <block slot="content">首页</block>
		</cu-custom>
		<view class="index_head">
			<view class="cu-bar  search">
				<view class="action text-white" >
				    <text class="margin-right-sm">长沙市</text>
				    <text class="cuIcon-triangledownfill"></text>
				</view>
			    <view class="search-form round">
			        <text class="cuIcon-search"></text>
			        <input  @blur="InputBlur" :adjust-position="false" class="bg-white" type="text" placeholder="搜索"
			            confirm-type="search"></input>
			    </view>
			</view>
			<view class="index_title">趣味组局</view>
			<view class="index_title_sub">带给您不一样的组局体验</view>
			<swiper class="screen-swiper square-dot"  :indicator-dots="true" :circular="true"
			 :autoplay="true" interval="5000" duration="500">
				<swiper-item v-for="(item,index) in swiperList" :key="index">
					<image :src="item.url"></image>
				</swiper-item>
			</swiper>
		</view>

		

		
		<view class="new_zuju">
			<!-- 附近商家 -->
			 <view class="cart_title">
				 <view class="dot_short"></view>
				 <view class="cart_word"> 附近商家</view>
				 <view class="dot_short"></view>
			 </view>
			 <view class="shop-container">
						<!-- 左侧分类列表 -->
					<view class="category-list">
						<view class="category-item" 
							:class="{'active': cate_id == 0}"
							@tap="changeCategory(0)">
							<image src="http://localhost:8000/upload/14/6a9e898f5cb93df703f7a801783070.png" class="icon_tuijian" mode="aspectFit"></image>
							<view>推荐</view> 
						</view>
						<view class="category-item" v-for="(item, index) in categoryList" 
							:key="index"
							:class="{'active': item.id === cate_id}"
							@tap="changeCategory(item.id)">
							<image :src="item.cate_img" class="icon_tuijian" mode="aspectFit"></image>
							<view>{{item.cate_name}}</view> 
						</view>
					</view>
						<!-- 右侧商家列表 -->
						<scroll-view class="shop-list" scroll-y  @scrolltolower="loadMore">
							<view  class="shop_item" v-for="(shop, index) in shopList" :key="index" @tap="goToShop(shop)">
								<view class="flex align-center margin-bottom-sm">
									<image class="shop_img"  :src="shop.thumb" mode="aspectFit"></image>
									<view style="width: 100%;">
										<view class="flex justify-between">
											<view class="shop_name">{{shop.name || ''}}</view>
											<view class="flex align-center">
												<view :class="shop.is_open ? 'shop_open' : 'shop_close'">{{shop.is_open ? '营业' : '休息中'}}</view>
												<!-- <view class="shop_time">24小时</view> -->
											</view>
										</view>
										<view class="flex justify-between shop_phone">
											<view>电话 | {{shop.mobile || ''}}</view>
											<view><i class="cuIcon-locationfill shop_distance"></i> {{shop.distance || 0}}Km</view>
										</view>
										<view class="shop_phone" >
											<view>位置 | {{shop.address_detail}}</view>
										</view>
									</view>
								</view>
								
								<view v-if="shop.cassette.length" class="flex">
									<view  v-for="(game, idx) in shop.cassette.slice(0, 3)" :key="idx" style="margin-right: 10rpx;">
										<view>
											<view class="game_img">
												<image :src="game.thumb"   mode="aspectFill" alt="" srcset="" />
												<view  class="game_tips">{{game.max_num}}人组局</view>
											</view>
											
											<view class="game_name">{{game.name}}</view>
											<view class="flex margin-tb-xs">
												<view class="game_price">
													<text>¥</text>
													<text>{{game.price}}</text>
													<text>/小时</text>
												</view>
												<!-- <view style="color:  rgba(128, 128, 128, 1);font-size: 14rpx;margin-left: 5rpx;">{{game.max_num}}人组局</view> -->
											</view>
										</view>
									</view>
								</view>
							</view>
							 <view class="loading-text" v-if="loading">加载中...</view>
							 <view class="loading-text" v-if="noMore">没有更多了</view>
						</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
import { getMechantCate, getMechantList } from '@/api/merchant.js';

export default {
  data() {
    return {
      swiperList: [{ id: 0, url: 'https://img.js.design/assets/img/62f0aef4767e88b0e826987a.png' }],
      currentCategory: 0, // 当前选中的分类索引
      cate_id: 0, // 当前选中的分类ID
      categoryList: [], // 分类列表
      shopList: [], // 商家列表
      page: 1, // 当前页码
      pageSize: 10, // 每页条数
      loading: false, // 是否正在加载
      noMore: false, // 是否没有更多数据
    };
  },
  onLoad() {
    this.initData(); // 初始化数据
  },
  methods: {
    // 初始化数据
    async initData() {
      await this.getCategoryList(); // 获取分类列表
      await this.getShopList(); // 获取商家列表
    },

    // 获取分类列表
    async getCategoryList() {
      const res = await getMechantCate();
      this.categoryList = res.data;
    },

    // 获取商家列表
    async getShopList() {
      if (this.noMore || this.loading) return; // 防止重复加载

      this.loading = true; // 开始加载

      const res = await getMechantList({
        page: this.page,
        pageSize: this.pageSize,
        cate_id: this.cate_id,
      });

      if (res.data.length > 0) {
        this.shopList = this.page === 1 ? res.data : [...this.shopList, ...res.data]; // 追加数据
        this.page++; // 页码增加
      } else {
        this.noMore = true; // 没有更多数据
        if (this.page === 1) {
          this.shopList = []; // 如果第一页没有数据，清空列表
        }
      }

      this.loading = false; // 结束加载
    },

    // 加载更多
    loadMore() {
      if (!this.noMore && !this.loading) {
        this.getShopList(); // 加载更多数据
      }
    },

    // 切换分类
    changeCategory(cate_id) {
      this.cate_id = cate_id; // 更新分类ID
      this.page = 1; // 重置页码
      this.noMore = false; // 重置没有更多数据的状态
      this.shopList = []; // 清空商家列表
      this.getShopList(); // 重新加载数据
    },

    // 搜索触发
    InputBlur(e) {
      console.log(e);
    },

    // 跳转到商家详情
    goToShop(shop) {
      uni.navigateTo({
        url: `/pages/shop/detail?id=${shop.id}`,
      });
    },
  },
};
</script>

<style scoped>
	.page{
		width: 100%;
		height: 100%;
	}
	.screen-swiper{
		height: 442rpx;
		width: 100%;
	}
	.index_head{
		position: relative;
		
	}
	image {
		width: 100%;
		height: 100%;
		display: block;
	}
	.search{
		position: absolute;
		top: 26rpx;
		z-index: 1;
		width: 100%;
	}
	.cu-bar .search-form{
		height: 72rpx;
		line-height: 72rpx;
	}
	.index_title{
		position: absolute;
		top: 180rpx;
		left: 54rpx;
		font-size: 85rpx;
		color: rgba(255, 255, 255, 1);
		letter-spacing:3rpx;
		z-index: 1;
	}
	.index_title_sub{
		position: absolute;
		z-index: 1;
		color: rgba(255, 255, 255, 1);
		font-size: 28rpx;
		left: 66rpx;
		top: 300rpx;
	}
	.nav_img{
		width: 85rpx;
		height: 85rpx;
	}
	.cu-list.grid.no-border>.cu-item{
		display: flex;
		align-items: center;
		flex-direction: column;
	}
	.divider{
		height: 10rpx;
		background: rgba(244, 244, 244, 1);
	}
	.new_zuju{
		background: white;
		padding-top: 32rpx;
		padding-left:0 ;
		padding-right: 0rpx;
		
	}
	.cart_title{
		text-align: center;
		font-size: 34rpx;
		color: rgba(51, 51, 51, 1);
		font-weight: 400;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 24rpx;
	}
	.cart_title .dot_short{
		width: 8rpx;
		height: 18rpx;
		border-radius: 6rpx;
		transform: rotate(90deg);
		background: linear-gradient(180deg, rgba(254, 94, 41, 1) 0%, rgba(254, 118, 4, 1) 100%);
	}
	.cart_title .cart_word{
		padding-left: 30rpx;
		padding-right: 30rpx;
	}
	.shop-container {
		display: flex;
		height: calc(100vh - 600rpx); /* 调整合适的高度 */
	}

.category-list {
    width: 180rpx;
    background-color: #f8f8f8;
}

.category-item {

	height: auto;
    text-align: center;
    font-size: 28rpx;
    color: #333;
    position: relative;
	padding: 20rpx 0;
	display: flex;flex-direction: column;align-items: center;
}
.category-item .icon_tuijian{
	width: 48rpx;
	height: 48rpx;
	margin-bottom: 10rpx;
}

.category-item.active {
    background-color: #fff;
    color: #FE5E29;
    font-weight: bold;
}

.category-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 35rpx;
    width: 6rpx;
    height: 30rpx;
    background: #FE5E29;
}

.shop-list {
    flex: 1;
    background-color: #fff;
    padding: 0 20rpx;
	padding-bottom: 30rpx;
}

.shop-list .shop_img{
	width: 150rpx;height: 150rpx;margin-right: 12rpx;
}

.shop-list .shop_name{
	color:  rgba(51, 51, 51, 1);font-size: 26rpx;font-weight: 400;margin-bottom: 18rpx;font-weight: bold;
}
.shop-list .shop_open{
	background: rgba(228, 59, 62, 1);color: #fff;font-size: 20rpx;padding: 5rpx 10rpx;border: 1rpx solid rgba(228, 59, 62, 1)
}
.shop-list .shop_close{
	background: #ccc;color: #fff;font-size: 20rpx;padding: 5rpx 10rpx;border: none
}
.shop-list .shop_time{
	background-color: #fff;font-size: 20rpx;padding: 5rpx 10rpx;border: 1rpx solid rgba(228, 59, 62, 1);color:rgba(228, 59, 62, 1) ;
}
.shop-list .shop_phone{
	color: rgba(102, 102, 102, 1);font-size: 20rpx;line-height: 1.5;
}
.shop-list .shop_distance{
	color: rgba(254, 94, 41, 1);
}
.shop-list .game_img{
	width: 176rpx;height: 134rpx;position: relative;
}
.shop-list .game_tips{
	position: absolute;left: 0;bottom: 0;background: rgba(228, 59, 62, 1);color: #fff;font-size: 24rpx;padding: 5rpx 10rpx;border-top-right-radius: 10rpx;
}
.shop-list .game_name{
	font-size: 24rpx;color: rgba(51, 51, 51, 1);font-weight: bold
}
.shop-list .game_price{
	color: rgba(228, 59, 62, 1);font-size: 20rpx;
}
.shop-list .shop_item{
	border-bottom: 1px solid #eee;
	padding-bottom: 20rpx;
}

.shop-left {
    position: relative;
    margin-right: 24rpx;
}

.shop-image {
    width: 200rpx;
    height: 200rpx;
    border-radius: 12rpx;
}

.recommend-tag {
    position: absolute;
    left: 0;
    top: 0;
    background: linear-gradient(90deg, #FF5722, #FF9800);
    color: #fff;
    font-size: 24rpx;
    padding: 6rpx 16rpx;
    border-radius: 12rpx 0 12rpx 0;
    display: flex;
    align-items: center;
    z-index: 1;
}

.recommend-tag .cuIcon-appreciate {
    font-size: 24rpx;
    margin-right: 4rpx;
}

.shop-info {
    flex: 1;
}

.shop-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16rpx;
}

.shop-name {
    font-size: 32rpx;
    font-weight: bold;
    color: #333333;
}

.shop-status {
    display: flex;
    align-items: center;
    font-size: 24rpx;
}

.status-tag {
    color: #999999;
    margin-right: 12rpx;
}

.status-tag.open {
    color: #FF5722;
}

.shop-distance {
    color: #999999;
}

.shop-contact {
    margin-bottom: 20rpx;
}

.shop-address, .shop-phone {
    display: flex;
    align-items: center;
    font-size: 26rpx;
    margin-bottom: 8rpx;
}

.shop-contact .label {
    color: #999999;
    margin-right: 20rpx;
    min-width: 60rpx;
}

.shop-contact .value {
    color: #333333;
}

.game-list {
    background: #F8F8F8;
    border-radius: 12rpx;
    padding: 16rpx;
}

.game-item {
    display: flex;
    align-items: center;
    padding: 12rpx 0;
}

.game-item:not(:last-child) {
    border-bottom: 1rpx solid #EEEEEE;
}

.game-image {
    width: 100rpx;
    height: 100rpx;
    border-radius: 8rpx;
    margin-right: 16rpx;
}

.game-info {
    flex: 1;
}

.game-name {
    font-size: 28rpx;
    color: #333333;
    margin-bottom: 8rpx;
    display: block;
}

.game-players {
    font-size: 24rpx;
    color: #999999;
}

.game-price {
    text-align: right;
}

.price-symbol {
    font-size: 24rpx;
    color: #FF5722;
}

.price-value {
    font-size: 36rpx;
    color: #FF5722;
    font-weight: bold;
    margin: 0 4rpx;
}

.price-unit {
    font-size: 24rpx;
    color: #999999;
}

/* 调整左侧分类列表样式 */
.category-list {
    width: 160rpx;
    background: #F8F8F8;
}

.category-item {
    font-size: 26rpx;
}

/* 调整右侧列表容器样式 */
.shop-list {
    flex: 1;
    padding: 0 24rpx;
}
.loading-text {
  text-align: center;
  font-size: 24rpx;
  color: #999;
  padding: 20rpx 0;
}
</style>